import Taro, { Component } from '@tarojs/taro'
import { Image, View } from '@tarojs/components'
import './index.scss'
import classNames from 'classnames'
import styles from './index.module.scss'
import { IconGold } from "@/components/index"
import { getThumbnailConfig, headImg } from "@/utils/utils"

export default class Index extends Component {
  props: any

  render() {
    const prefixCls = 'goods'
    const { className, info, onClick } = this.props
    return info && (<View className={classNames(styles[prefixCls], 'd-f', className)} onClick={() => onClick && onClick()}>
      <Image src={getThumbnailConfig(headImg(info.images), 320, 320)} className={styles[`${prefixCls}-img`]} lazyLoad/>
      <View className={classNames(styles[`${prefixCls}-info`], 'd-f f-d-c j-c-b')}>
        <View className={styles[`${prefixCls}-head`]}>
          <View className={classNames(styles[`${prefixCls}-name`], 't-o-e-2')}>{info.name}</View>
          {info.specSnap && <View className={classNames(styles[`${prefixCls}-attr`], 't-o-e')}>{info.specSnap}</View>}
        </View>
        <View className={classNames(styles[`${prefixCls}-foot`], 'd-f a-i-b j-c-b')}>
          <View className={classNames(styles[`${prefixCls}-price`], 'bnn-number')}>{info.salePrice} <IconGold/></View>
          <View  className={styles[`${prefixCls}-number`]}>x{info.number}</View>
        </View>
      </View>
    </View>)
  }
}
